<!--
 * @Author: zhangfeng
 * @Date: 2024-01-12 10:34:40
 * @LastEditTime: 2024-02-01 18:04:33
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\sourceMateral\module\DialogSource.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<div>
		<el-dialog v-model="dialogVisible" :title="tips" width="75%">
			<el-form
				ref="ruleFormRef"
				:model="ruleForm"
				:rules="rules"
				label-width="120px"
				class="demo-ruleForm"
				:size="formSize"
				status-icon
			>
				<el-form-item label="文章标题" prop="articleTitle">
					<el-input v-model="ruleForm.articleTitle" />
				</el-form-item>
				<el-form-item label="封面图片" prop="articleImage">
					<Upload :actions="hostImage" v-model="ruleForm.articleImage" />
				</el-form-item>
				<el-form-item label="文章摘要" prop="articleSummary">
					<el-input v-model="ruleForm.articleSummary" />
				</el-form-item>
				<el-form-item label="文章类型" prop="articleType">
					<el-select
						v-model="ruleForm.articleType"
						class="m-2"
						placeholder="Select"
						size="large"
						style="width: 100%"
					>
						<el-option
							v-for="item in articleTypeOption"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="文章内容" prop="articleContent">
					<EditorVue
						:actionsImage="hostImage"
						:actionsVideo="hostVideo"
						v-if="dialogVisible && ruleForm.articleType == 1"
						v-model="ruleForm.articleContent"
					/>
					<Markdown
						v-if="ruleForm.articleType == 2"
						v-model="ruleForm.articleContent"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-form-item>
						<el-button type="primary" @click="submitForm(ruleFormRef)">
							{{ submitText }}
						</el-button>
						<el-button @click="dialogVisible = false">Cancal</el-button>
					</el-form-item>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import EditorVue from '../../../components/Editor/Editor.vue';
import Markdown from '../../../components/Editor/Markdown.vue';
import Upload from '../../../components/Upload/Upload.vue';
import { useArticle } from '../../../composables/useArticle';
import successOrError from '../../../utils/successOrError';
import { articleTypeOption } from '../../../utils/configOption';

const { createArticles, updateArticles } = useArticle();
const hostImage = ref(
	import.meta.env.VITE_API_PREFIX + '/article/upload/image'
);
const hostVideo = ref(
	import.meta.env.VITE_API_PREFIX + '/article/upload/video'
);
const tips = ref('');
const dialogVisible = ref(false);
const ruleFormRaw = ref({
	articleTitle: '',
	articleImage: '',
	articleSummary: '',
	articleType: 1,
	articleContent: '',
});
const ruleForm = ref();

const rules = ref<FormRules>({
	articleTitle: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
	articleContent: [
		{ required: true, message: '请输入文章内容', trigger: 'blur' },
	],
});
const formSize = ref<'default' | 'small' | 'large'>('default');
const emit = defineEmits<{ (e: 'getlist'): void }>();
const submitText = ref('create');
const ruleFormRef = ref<FormInstance>();

const submitForm = async (refs: FormInstance | undefined) => {
	if (!refs) return;
	await refs.validate(async (valid, fields) => {
		if (valid) {
			let result: AxiosResponse<ResponseData>;
			if (ruleForm.value?.id) {
				result = await updateArticles(ruleForm.value);
			} else {
				result = await createArticles(ruleForm.value);
			}
			if (successOrError) {
				console.log(result);
				successOrError(result);
				dialogVisible.value = false;
			}
			emit('getlist');
		}
	});
};
const reset = () => {
	ruleForm.value = JSON.parse(JSON.stringify(ruleFormRaw.value));
};
const handleAdd = () => {
	reset();
	dialogVisible.value = true;
};
const editArticle = (data: ArticleQuery) => {
	reset();
	dialogVisible.value = true;
	ruleForm.value = JSON.parse(JSON.stringify(data));

	console.log(ruleForm.value);
};

defineExpose({
	handleAdd,
	editArticle,
});
</script>

<style scoped></style>
